<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<div id="app">
		<h2>遍历数组</h2>
		<ul>
			<li v-for="(p,index) in persons" :key="index">
				{{index}}---{{p.name}}---{{p.age}}
				---<button @click="deleteP(index)">删除</button>
				---<button @click="updateP(index,{name:'Can',age:30})">更新</button>
			</li>
		</ul>
		<h2>遍历对象</h2>
		<ul>
			<li v-for="(value,key) in persons[1]" :key="key">
				{{key}}---{{value}}
			</li>
		</ul>

		<h2>搜索(过滤)和排序</h2>
		<input type="text" v-model="searchName" />

		<ul>
			<li v-for="(p,index) in filterpersons" :key="index">
				{{index}}---{{p.name}}---{{p.age}}
				---<button @click="deleteP(index)">删除</button>
				---<button @click="updateP(index,{name:'Can',age:30})">更新</button>
			</li>
		</ul>
		<button @click="setOrderType(1)">年龄升序</button>
		<button @click="setOrderType(2)">年龄降序</button>
		<button @click="setOrderType(0)">原本顺序</button>
	</div>
	<script src="../vue.js"></script>
	<script type="text/javascript">
		// vue本身只是监视了数组的改变，没有监视数组内部数据的改变
		// vue重写了数组中一系列改变数组内部数据的方法，先调用原生，再更新界面-->数组内部改变，界面自动更新
		var vm = new Vue({
			el:'#app',
			data:{
				searchName:'',
				orderType: 0, // 0-原来，1-升，2-降
				persons: [ 
					{name:'Tom',age:18},
					{name:'Bob',age:17},
					{name:'Ann',age:16},
					{name:'Andy',age:15},
				]
			},
			methods: {
				deleteP (index) {
					// 删除persons数组中指定index的p
					this.persons.splice(index,1)
				},
				updateP (index,newP) {
					// this.persons[index] = newP // 并没有改变数组本身，数组指向位置仍没变，没有调用变异方法，不会更新界面
					this.persons.splice(index,1,newP)
				},
				// 排序状态变化
				setOrderType (num) {
					this.orderType = num
				}

			},
			computed: {
				filterpersons () {
					// 取出相关的数据
					const {searchName,persons,orderType} = this
					// 最终需要显示的数组
					var fpersons = [] // let fpersons;
					// 对persons进行过滤
					fpersons = persons.filter(function(p) { // 可简写为 p => p.name.indexof(searchName)!==-1
						return p.name.indexOf(searchName) > 0 //返回值为true时，即输入的字符串在p.name中存在
					})

					// 排序
					if (orderType!==0) {
						fpersons.sort(function(p1,p2) { //返回负数p1在前;返回正数p2在前 
							// 1-升，2-降
							if (orderType == 1) {
								return p1.age - p2.age
							} else {
								return p2.age - p1.age
							}

						})
					}

					return fpersons
				}
			}
		});
	</script>
</body>
</html>